<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <el-form ref="searchMap" class="serach_wrapper flex-space-between" :inline="true" :model="searchMap">
        <div class="search">
          <el-form-item prop="plateNo" size="small">
            <el-input v-model="searchMap.plateNo" placeholder="请输入车牌号" clearable @keyup.enter.native="btn_primary" />
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit flex">
          <!-- <el-button icon="el-icon-plus" class="btn_primary" @click="handleAdd()">
            新增
          </el-button> -->
        </div>
      </el-form>
      <div class="table_container">
        <el-table stripe v-loading="loading" :data="vehicleInfoList">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <!-- <el-table-column prop="simNo" label="手机号" align="center"></el-table-column> -->
          <el-table-column prop="plateNo" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="sendTime" label="设备上传时间" align="center"></el-table-column>
          <el-table-column prop="orgLongitude" label="原始经度" align="center"></el-table-column>
          <el-table-column prop="orgLatitude" label="原始纬度" align="center"></el-table-column>
          <el-table-column prop="longitude" label="经度" align="center"></el-table-column>
          <el-table-column prop="latitude" label="纬度" align="center"></el-table-column>
          <el-table-column prop="altitude" label="海拔" align="center"></el-table-column>
          <el-table-column prop="velocity" label="时速" align="center"></el-table-column>
          <el-table-column prop="mileage" label="公里数" align="center"></el-table-column>
          <el-table-column prop="direction" label="方向" align="center"></el-table-column>
          <el-table-column prop="directionDescr" label="方向描述" align="center"></el-table-column>
          <el-table-column prop="alarmState" label="主动报警状态" align="center">
            <template slot-scope="scope">
              <div class="status-content">
                <span :class="scope.row.online ? 'status-normal-radius' : 'status-void-radius'"></span>
                <span :class="scope.row.online ? 'status-normal' : 'status-void'">{{ isOnline(scope.row.online) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="alarmStateDescr" label="主动报警描述" align="center"></el-table-column>
          <!-- <el-table-column prop="vehicleType" label="车辆类型" align="center"></el-table-column> -->
          <!-- <el-table-column label="车辆轨迹" width="200" align="center">
            <template slot-scope="scope">
              <span type="text" class="tag_primary" size="small" @click="handleDetails(scope.row)">轨迹回放</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <pagination v-if="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
        @change="getVehicleInfoList" />
    </div>
    <el-dialog title="车辆轨迹回放" class="m_dialog" :visible.sync="dialogVisableVisitor" :close-on-click-modal="false">
      <el-table stripe v-loading="loading" :data="vehicleInfoPlaybackList" height="500"
        :default-sort="{ prop: 'sendTime', order: order }">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="sendTime" label="定位时间" align="center"></el-table-column>
        <el-table-column prop="plateNo" label="定位状态" align="center"></el-table-column>
        <el-table-column label="经纬度" align="center" >
          <template slot-scope="scope">
            {{ scope.row.longitude + ',' + scope.row.latitude }}
          </template>
        </el-table-column>
        <el-table-column prop="velocity" label="速度" align="center"></el-table-column>
      </el-table>
      <!-- <pagination v-if="total2 > 0" :total="total2" :page.sync="searchMap2.pageNum" :limit.sync="searchMap2.pageSize"
        @change="getVehicleInfoPlaybackList" /> -->
    </el-dialog>
  </div>
</template>

<script>
import { listVehicTrajector, getVehicleInfoDetail } from '@/api'
export default {
  data() {
    return {
      order: 'descending',
      // 搜索数据
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数 
        plateNo: undefined,
      },
      searchMap2: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数 
        plateNo: undefined,
      },
      // 车辆信息数据
      formData: {},
      // 访客预约表单验证
      // 考试资料数据加载状态
      loading: false,
      // 条数
      total: 0,
      total2: 0,
      // 车辆信息弹框
      dialogVisableVisitor: false,
      // 标题
      title: '',
      // 车辆信息列表
      vehicleInfoList: [],
      vehicleInfoPlaybackList: [],
      intervalId: null,
    };
  },
  created() {
    this.getVehicleInfoList();
    this.getVehicleInfoPlaybackList();

  },
  mounted() {

  },
  computed: {
    pageTitle() {
      return '车辆轨迹'
    }
  },
  watch: {
    dialogVisableVisitor(newVal) {
      if (!newVal && this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      } else {
        this.searchMap2.pageNum = 1;
        this.getVehicleInfoPlaybackList();
        this.intervalId = setInterval(() => {
          if (this.searchMap2.pageNum < 10) {
            this.searchMap2.pageNum += 1
          } else {
            this.searchMap2.pageNum = 1
          }
          this.getVehicleInfoPlaybackList();
        }, 2000);
      }
    },
  },
  methods: {
    isOnline(type) {
      return type ? '在线' : '离线'
    },
    getVehicleInfoList() {
      this.loading = true;
      listVehicTrajector(this.searchMap).then(res => {
        if (200 === res.code) {
          this.vehicleInfoList = res.rows
          this.total = res.total
          this.loading = false
        }
      })
    },
    getVehicleInfoPlaybackList() {
      listVehicTrajector(this.searchMap2).then(res => {
        if (200 === res.code) {
          this.vehicleInfoPlaybackList = res.rows
          this.total2 = res.total
          // this.intervalId = setInterval(() => {
          //   // this.order === 'descending' ? this.order = 'ascending' : this.order = 'descending'
          //   this.order = this.order === 'descending' ? 'ascending' : 'descending';
          //   console.log(this.order)
          // }, 2000)

        }
      })
    },
    // 查询
    handleSearch() {
      this.getVehicleInfoList();
    },
    // 重置
    handleReset() {
      this.searchMap = {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数 
        plateNo: undefined,
      }
      this.getVehicleInfoList()
    },
    // 点击详情
    handleDetails(row) {
      this.dialogVisableVisitor = true
    },
    // 点击删除
    handleDelete(row) {
      const examMaterialId = [row.examMaterialId]
      this.$confirm('是否确认编号为"' + examMaterialId + '"的数据项？').then(res => {
        return deleteExamMaterial(examMaterialId)
      }).then(() => {
        this.getVehicleInfoList()
        this.$message.success('删除成功')
      })
    },
    // 点击新增
    handleAdd() {
      this.reset();
      this.dialogVisibleExamMaterial = true
    },
    // 重置方法
    reset() {
      this.formData = {
        examMaterialName: '', // 文件名
        remark: '', // 备注
        examMaterialFiles: [], // 文件列表
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // // 提交
    // submitForm () {
    //   this.$refs['form'].validate((valid) => {
    //     if (valid) {
    //       if (this.formData.visitorId !== undefined) {
    //         updateVisitor(this.formData).then(res => {
    //           if (200 === res.code) {
    //             this.$message.success('修改成功')
    //             this.getVisitorList()
    //           }
    //         })
    //       } else {
    //         console.log(this.formData)
    //         addExamMaterial(this.formData).then(res => {
    //           if (200 === res.code) {
    //             this.$message.success('添加成功')
    //             this.dialogVisableVisitor = false
    //           }
    //           this.getExamMaterialList()
    //         })
    //       }

    //     }
    //   })
    // },
    // fileChange (file) {
    //   this.formData.examMaterialFiles.push(file)
    // }
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
}
</script>
<style lang='less' scoped></style>